.amid-bottom {
    position: relative;
    bottom: -20%;
    opacity: 0;
}

.amid-left {
    position: relative;
    left: -20%;
    opacity: 0;
}

.amid-right {
    position: relative;
    right: -20%;
    opacity: 0;
}

.amid-top {
    position: relative;
    top: -20%;
    opacity: 0;
}

.amid-top1 {
    position: relative;
    top: -20%;
    opacity: 0;
}

.amid-top3 {
    position: relative;
    top: -20%;
    opacity: 0;
}

.icon-bottom {
    width: 24px;
    height: 25px;
    position: fixed;
    left: 50%;
    bottom: 30px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 99;
}

/* navbar-left */

.navbar-left {
    position: absolute;
    width: 80px;
    top: 40%;
    right: 20px;
    z-index: 99;
    border-radius: 8px;
}

.navbar-left div {
    flex-direction: column;
    width: 80px;
    height: 80px;
    background-color: #61656d;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #999999;
    transition: .8s all ease;
}

.navbar-left div:hover {
    background-color: #ffcf29;

    cursor: pointer;
}

.navbar-left span {
    width: 27px;
    height: 38px;
}

.navbar-left div:hover .ico1 {
    background-image: url('../images/icon/ico-t-dark.png');
}

.navbar-left div:hover .ico2 {
    background-image: url('../images/icon/ico-t.png');
}

.navbar-left div:hover .ico3 {
    background-image: url('../images/icon/icon-top-dark.png');
}

.ico2-wrapper {
    float: right;
    /* transition: all ease .5s; */

}

.ico2-wrapper:hover {
    width: 200px;
    flex-direction: row !important;
    
}

.ico2-wrapper:hover .ico2-tel {
    display: block;

}
.ico2-wrapper:hover .kf{
    width: 100px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
 
    

}
.ico2-wrapper:hover .kf p{
    color: #333333 !important;
    text-align: unset;
}
.ico2-wrapper .kf p{
  text-align: center;

}

.kf p{
 width: 120px;
}

.ico2-tel {
    display: none;
   
}

.ico1 {
    background-image: url('../images/icon/tel-light.png');
    background-repeat: no-repeat;
    background-position: center;
}

.ico2 {
    background-image: url('../images/icon/tel-light1.png');
    background-repeat: no-repeat;
    background-position: center;
}

.ico3 {
    background-image: url('../images/icon/icon-top.png');
    background-repeat: no-repeat;
    background-position: center;
}

.navbar-left div p {
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
}

.section-one {
    background-image: url('../images/banner/home-banner.jpg');
    background-size: cover;
}

.section-two {
    background-image: url('../images/banner/home-js.png');
    background-size: cover;
    position: relative;
}

.section-three {
    background-image: url('../images/banner/home-js.png');
    background-size: cover;
}

.section-four {
    background-image: url('../images/home-bg4.jpg');
    background-size: cover;
}

.section-fire {
    background-image: url('../images/home-bg4.jpg');
    background-size: cover;
}

.section-one-wrapper {
    display: flex;
}

.banner-iphone {
    position: relative;
    width: 50%;
}

.ipone-left {
    width: 100%;
}

.ipone-top {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(28%);
}

.banner-title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 44px;
}

.banner-title h3::after {
    display: block;
    content: '';
    width: 50px;
    height: 100px;
    background-image: url('../images/icon/banner-title-icon.png');
    background-repeat: no-repeat;
    margin-top: -40px;
    margin-left: 10px;
}

.banner-title h3 span {
    color: #fac613;
    flex-shrink: 0;
}

.banner-title h3 {
    color: #fff;
    font-size: 60px;
    display: flex;
}

.banner-title div {
    color: #ffffff;
    font-size: 40px;
    margin-top: 85px;
}

.banner-title p {
    color: #ffffff;
    font-size: 22px;
    margin-top: 48px;
}

.banner-title section {
    color: #333333;
    font-size: 16px;
    width: 140px;
    height: 41px;
    background-image: linear-gradient(0deg, #f8c30b 0%, #ffcf29 100%);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 57px;
}

.banner-title section a {
    display: flex;
    align-items: center;
}

.banner-title section a::after {
    content: '';
    display: block;
    width: 6px;
    height: 12px;
    background-image: url('../images/icon/icon-left-s.png');
    margin-left: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.core-technology-wrapper {
    width: 1302px;
    margin: 190px auto 0 auto;
    display: flex;
    justify-content: space-between;
}

.title-img-wrapper {
    width: 83px;
    height: 70px;
    position: absolute;
    left: 120px;
}

.home-content-title {
    position: absolute;
    width: 600px;
    top: 50%;
    left: 33px;
    font-size: 34px;
    color: #ffffff;
    transform: translate(0, -20%);
}

.home-content-title h4 {
    font-size: 24px;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.home-content-title h4::after {
    content: '';
    width: 61px;
    height: 1px;
    background-color: #ffffff;
    margin-left: 20px;
}

.home-content-title p {
    font-size: 18px;
    color: #ffffff;
    opacity: 0.6;
    margin-top: 25px;
    margin-left: 115px;
    letter-spacing: 14px;
}

.swiper-left-wrapper h3 {
    color: #ffffff;
    font-size: 24px;
    padding-bottom: 17px;
    margin-top: 106px;
}

.home-content-wrapper {
    margin-left: 48px;
}

.swiper-left-wrapper a {
    color: #ffffff;
    font-size: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ffffff;
}

.swiper-left-wrapper {
    width: 458px;
    position: relative;
}

.swiper-left-wrapper p {
    width: 410px;
    font-size: 14px;
    color: #777777;
    line-height: 30px;
    margin-top: 30px;
}

.swiper-right-wrapper {
    width: 720px;
    position: relative;
}

.swiper-right-wrapper video {
    width: 100%;
    border-radius: 8px;
    outline: none;
}

.swiper-pagination-left {
    position: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.swiper-pagination-left .swiper-pagination-bullet {
    width: 68px;
    height: 1px;
    display: inline-block;
    border-radius: unset;
    background-color: #ffffff;
    opacity: 0.5;
    margin: unset !important;
}

.swiper-pagination-left .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #fbc817;
}

.pagination-self-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 68px;
}

.num-one {
    color: #ffffff;
    font-size: 18px;
}

.num-two {
    color: #f8c40e;
    font-size: 18px;
}

.swiper-pagination-bullet:nth-child(1) {
    display: flex;
    align-items: center;
}

/* 
.swiper-pagination-bullet:nth-child(1):before {
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ffffff;
    flex-shrink: 0;
} */

/* .swiper-pagination-bullet:last-child {
    position: relative;
}

.swiper-pagination-bullet:last-child::after {
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #f8c40e;
    ;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    transform: translate(50%, -30%);
} */

.pagination-self-wrapper .swiper-button-next {
    position: unset;
    background-image: url('../images/icon/swiper-left.png');
    width: 50px;
    flex-shrink: 0;
    background-size: 50%;
    background-position: center;
    margin-top: unset;
}

.section-three-wrapper {
    display: flex;
    width: 1450px;
    margin: 230px auto 0 auto;
    justify-content: space-between;
}

.section-three .title-img-wrapper {
    position: absolute;
    right: 237px;
    left: unset;
}

.section-three .home-content-title {
    position: absolute;
    width: 600px;
    top: 50%;
    left: -305px;
    font-size: 34px;
    color: #ffffff;
    transform: translate(0, -20%);
}

.section-three .home-content-title h4 {
    flex-direction: row-reverse;
    margin-right: 263px;
}

.section-three .home-content-title h4::after {
    margin-right: 20px;
}

.section-three .home-content-title p {
    transform: translate(-71%);
}

.three-swiper {
    width: 1070px;
    position: relative;
    display: none;
}

.three-swiper-active {
    display: block;
}

.three-swiper-active .swiper-slide {
    width: 100%;
}

.three-swiper .swiper-slide {
    border-radius: 8px;
    padding: 0 10px 10px 10px;
}

.three-swiper .swiper-slide img {
    border-radius: 8px;
    border: solid 1px #999999;
    padding: 10px;
}

.three-p {
    padding: 20px 0;
    font-size: 16px;
    line-height: 30px;
    color: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.three-p p {
    display: flex;
    align-items: center;
}

.three-p p::before {
    content: '';
    width: 18px;
    height: 1px;
    background-color: #f6f6f6;
    margin-right: 20px;
}

.three-p span {
    content: '';
    width: 25px;
    height: 10px;
    background-image: url('../images/icon/three-left.png');
    background-repeat: no-repeat;
    background-position: center;
}

.show-more {
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0px;
    color: #f6f6f6;
    display: flex;
    align-items: center;
    opacity: 0;
    position: relative;
    left: -20%;
}

.show-more::before {
    content: '';
    width: 46px;
    height: 1px;
    background-color: #ffffff;
    margin-right: 10px;
}

.three-ul {
    position: relative;
    right: -10%;
    opacity: 0;
}

.three-ul li {
    width: 236px;
    height: 40px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0px;
    color: #f6f6f6;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.three-ul li::before {
    content: '';
    width: 12px;
    height: 10px;
    border: solid 1px #f6f6f6;
    border-radius: 50%;
    margin-left: 20px;
    margin-right: 10px;
}

.three-active {
    color: #ffc23e !important;
    border: solid 1px #848382;
}

.three-active::before {
    border: solid 1px #ffc23e !important;
    background-color: #ffc23e;
}

.three-swiper .swiper-button-prev {
    top: -30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #cdcdcd;
    background-size: 12px;
    outline: none;
}

.three-swiper .swiper-button-prev:hover {
    background-color: #ffc23e;
}

.three-swiper .swiper-button-next {
    top: -30px;
    right: unset;
    left: 80px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #cdcdcd;
    background-size: 12px;
    outline: none;
}

.three-swiper .swiper-button-next:hover {
    background-color: #ffc23e;
}

.four-wrapper {
    width: 1440px;
    height: 100%;
    margin: 0 auto 0 auto;
}

.four-wrapper h2 {
    font-size: 34px;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    margin-top: 130px;
}

.four-wrapper h3 {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.four-wrapper h3::before {
    content: '';
    width: 61px;
    height: 1px;
    background-color: #ffffff;
    margin-right: 20px;
}

.four-wrapper h3::after {
    content: '';
    width: 61px;
    height: 1px;
    background-color: #ffffff;
    margin-left: 20px;
}

.four-swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 47px;
}

.four-swiper-wrapper {
    margin-top: 80px;
}

.four-swiper-wrapper .swiper-pagination {
    display: flex;
    justify-content: center;
    margin-top: 80px;
    position: unset;
}

.four-swiper-wrapper .swiper-pagination-bullet {
    width: 40px;
    height: 4px;
    background-color: #999999;
    border-radius: unset;
    margin-left: 10px;
    opacity: 1;
}

.four-swiper-wrapper .swiper-pagination .swiper-pagination-bullet-active {
    background-image: linear-gradient(0deg, #f8c30b 0%, #ffcf29 100%);
}

.four-message-wrapper {
    margin-top: 147px;
    display: flex;
}

.message-logo-wrapper {
    position: relative;
    width: 330px;
}

.four-message-wrapper form {
    display: flex;
    flex-direction: column;
    margin-left: 92px;
    width: 71.5%;
}

.message-logo {
    width: 83px;
    height: 70px;
    background-image: url('../images/icon/icon-lingx1.png');
}

.message-logo-wrapper h2 {
    position: absolute;
    top: 16px;
    left: 64px;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}

.message-logo-wrapper h4 {
    width: 301px;
    position: absolute;
    top: 55px;
    left: 25px;
    font-size: 34px;
    line-height: 30px;
    color: #ffffff;
}

.user-message-wrapper {
    display: flex;
}

.user-name-wrapper {
    display: flex;
    background-color: #fff;
    align-items: center;
    width: 49.7%;
    height: 40px;
    padding-left: 14px;
}

.user-tel-wrapper {
    display: flex;
    background-color: #fff;
    align-items: center;
    width: 49.7%;
    height: 40px;
    padding-left: 14px;
}

.user-message {
    margin-top: 20px;
    background-color: #fff;
    width: 100%;
    height: 80px;
    display: flex;
    padding: 14px;
}

.user-message textarea {
    width: 100%;
    outline: none;
    margin-left: 12px;
    font-size: 14px;
    color: #666666;
}

.user-message img {
    display: block;
    width: 20px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.user-name-wrapper input {
    outline: none;
    font-size: 14px;
    color: #666666;
    height: 100%;
    margin-left: 10px;
}

.user-tel-wrapper input {
    outline: none;
    font-size: 14px;
    color: #666666;
    height: 100%;
    margin-left: 10px;
}

.user-tel-wrapper {
    display: flex;
    background-color: #fff;
    align-items: center;
    width: 49.7%;
    height: 40px;
    margin-left: 20px;
}

.user-tel-wrapper span {
    display: flex;
}

.submit-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 19px;
}

.submit-btn-wrapper button {
    width: 220px;
    height: 41px;
    background-image: linear-gradient(0deg, #f8c30b 0%, #ffcf29 100%);
    font-size: 16px;
    color: #333333;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

@media(max-width:1680px) {
    .banner-title h3 {
        font-size: 42px;
    }
    .banner-title div {
        font-size: 30px;
    }
    .core-technology-wrapper {
        width: 1190px;
    }
    .swiper-right-wrapper {
        width: 620px;
    }
    .swiper-left-wrapper h3 {
        color: #ffffff;
        font-size: 24px;
        padding-bottom: 17px;
        margin-top: 40px;
    }
    .pagination-self-wrapper {
        margin-top: 40px;
    }
    .section-three-wrapper {
        display: flex;
        width: 1366px;
        margin: 230px auto 0 auto;
        justify-content: space-between;
    }
    .three-swiper {
        width: 970px;
    }
}

@media(max-width:1440px) {
    .swiper-right-wrapper {
        width: 520px;
    }
    .core-technology-wrapper {
        width: 1024px;
    }
    .swiper-left-wrapper h3 {
        font-size: 24px;
        margin-top: 0px;
    }
    .section-three-wrapper {
        display: flex;
        width: 1200px;
        margin: 230px auto 0 auto;
        justify-content: space-between;
    }
    .three-swiper {
        width: 800px;
    }
    .three-ul li {
        width: 215px;
        height: 29px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 35px;
        letter-spacing: 0px;
        color: #f6f6f6;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .four-wrapper {
        width: 90%;
    }
}

@media(max-width:1366px) {
    .three-swiper {
        width: 600px;
    }
    .section-three-wrapper {
        width: 98%;
    }
    .three-p {
        font-size: 12px;
    }
    .banner-title h3 {
        font-size: 34px;
    }
    .banner-title div {
        font-size: 24px;
    }
    .banner-title p {
        color: #ffffff;
        font-size: 18px;
    }
}

@media(max-width:1200px) {}

@media(max-width:1023px) {
    .submit-btn-wrapper button {
        width: 100%;
        cursor: pointer;
    }
    .four-message-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 100px;
    }
    .four-wrapper {
        width: 98%;
    }
    .four-message-wrapper form {
        margin-top: 100px;
        margin-left: unset;
        width: 100%;
    }
    .swiper-right-wrapper {
        width: 100%;
    }
    .section-one-wrapper {
        flex-wrap: wrap;
    }
    .core-technology-wrapper {
        width: 98%;
        flex-wrap: wrap;
        margin: 125px auto 0 auto;
    }
    .section-one-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
    .banner-iphone {
        width: 100%;
    }
    .banner-title {
        width: 98%;
        margin-left: unset;
        margin-top: 50px;
    }
    .banner-title div {
        color: #ffffff;
        font-size: 20px;
        margin-top: 10px;
    }
    .title-img-wrapper {
        width: 83px;
        height: 70px;
        position: relative;
        left: unset;
        top: unset;
        margin-top: 100px;
    }
}

@media(max-width:767px) {
    .user-message-wrapper {
        flex-wrap: wrap;
    }
    .user-name-wrapper {
        width: 100%;
    }
    .user-tel-wrapper {
        width: 100%;
        margin-top: 20px;
        margin-left: unset;
    }
    .banner-title h3 {
        font-size: 24px;
    }
    .banner-title div {
        font-size: 18px;
        margin-top: 0px;
    }
    .banner-title section {
        width: 100%;
    }
    .home-content-title p {
        margin-left: unset;
    }
    .title-img-wrapper {
        width: 100%;
    }
    .home-content-title {
        width: unset;
        font-size: 28px;
    }
    .home-content-wrapper {
        margin-left: unset;
    }
    .swiper-left-wrapper {
        width: 100%;
    }
    .swiper-left-wrapper p {
        width: 100%;
        font-size: 18px;
        line-height: 40px;
        margin-top: 20px;
    }
    .swiper-right-wrapper {
        margin-top: 15px;
    }
    .pagination-self-wrapper {
        margin-top: 0px;
    }
    .title-img-wrapper {
        width: 100%;
        margin-top: unset;
    }
}